<!DOCTYPE html>
<html>

<head>
    <script src='./tesseract.min.v2.0.0-beta.10.js'></script>
</head>

<body>
    <div>
        <select id="langsel">
            <option value='chi_sim' selected> 中文 </option>
            <option value='eng'> English </option>
        </select>
        <input type="file" id="file-1" class="inputfile" onchange="change()"/>
        <div>
            <span id="startPre">
                <a id="startLink" onclick="recognizeText()" href="#">Click here to recognize text</a> or choose your own
                image
            </span>
        </div>
        <img id="image-img"></img>
        <div id="log">
        </div>
    </div>
    <script>
        function recognizeText() {
            var file = document.getElementById('file-1').files[0];
            if (!file) {
                return;
            }
            var lan = document.getElementById('langsel').value;
            // v2.0.0
            var worker = new Tesseract.TesseractWorker({
                'corePath': './tesseract-core.wasm.v2.0.0-beta.10.js',
                'workerPath': './worker.min.v2.0.0-beta.10.js',
                'langPath': 'data'
            });
            var img = document.getElementById('image-img');
            worker.recognize(img, lan)
                .progress(function (packet) {
                    console.info(packet)
                    progressUpdate(packet)
                })
                .then(function (data) {
                    console.log(data)
                    progressUpdate({ status: 'done', data: data })
                });

        }

        function progressUpdate(packet) {
            var log = document.getElementById('log');

            if (log.firstChild && log.firstChild.status === packet.status) {
                if ('progress' in packet) {
                    var progress = log.firstChild.querySelector('progress')
                    progress.value = packet.progress
                }
            } else {
                var line = document.createElement('div');
                line.status = packet.status;
                var status = document.createElement('div')
                status.className = 'status'
                status.appendChild(document.createTextNode(packet.status))
                line.appendChild(status)

                if ('progress' in packet) {
                    var progress = document.createElement('progress')
                    progress.value = packet.progress
                    progress.max = 1
                    line.appendChild(progress)
                }


                if (packet.status == 'done') {
                    log.innerHTML = ''
                    var pre = document.createElement('pre')
                    pre.appendChild(document.createTextNode(packet.data.text))
                    log.append(pre)
                }

                log.insertBefore(line, log.firstChild)
            }
        }

        function change() {
            var file = document.getElementById('file-1').files[0];
            if (!file) {
                return;
            }
            var img = document.getElementById('image-img');
            img.src = window.URL.createObjectURL(file)
        }
    </script>
</body>

</html>